<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      canvas {
        background: red;
        outline: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600" tabindex="0"></canvas>
    <button id="btn">局部渲染</button>
    <button id="btn2">全部渲染</button>
    <script type="module">
      import { Canvas, Circle, Rect, move, click, Polygon } from './index.js'
      import { Point2d } from '../canvas-bezierLine/index.js'
      const canvas = new Canvas()
      const circle = new Circle({
        center: new Point2d(50, 50),
        radius: 50,
        fillColor: 'green',
      })
      const rect = new Rect({
        leftTop: new Point2d(50, 50),
        width: 100,
        height: 100,
        fillColor: 'black',
      })
      circle.on(click, (event) => {
        event.isStopBubble = true
        console.log('我是圆形')
      })
      rect.on(click, (event) => {
        console.log('我是矩形')
      })
      // const polygon = new Polygon({
      //   points: [1,2,3,,5].map(item => {
      //     return  Point2d.random(800,600)
      //   }), 
      //   fillColor: 'blue'
      // })
      // polygon.on(click, (event) => {
      //   // event.isStopBubble = true
      //   console.log('我是多边形')
      // })
      //   shape.on(click, (event) => {
      //     console.log(event, 'polygon')
      //   })
      const shapes = []
      // for (let i = 1; i <= 50; i++) {
      //   const circle = new Circle({
      //     center: Point2d.random(800, 600),
      //     radius: i + 20,
      //     fillColor:
      //       'rgb( ' +
      //       ((Math.random() * 255) >> 0) +
      //       ',' +
      //       ((Math.random() * 255) >> 0) +
      //       ',' +
      //       ((Math.random() * 255) >> 0) +
      //       ' )',
      //   })
      //   shapes.push(circle)
      // }
      // canvas.add(polygon)
      canvas.add(circle)
      canvas.add(rect)
      //console.log(shapes, '查看数据')
      //canvas.batchAdd([rect, shape])
      //canvas.batchAdd(shapes)

      // 局部改变圆的颜色
      document.getElementById('btn').addEventListener(click, () => {
        console.time('局部')
        circle.change(
          {
            fillColor: 'blue',
          },
          canvas
        )
        console.timeEnd('局部')
      })

      // 全部刷新 改变圆的颜色
      document.getElementById('btn2').addEventListener(click, () => {
        console.time('全部')
        canvas.reDraw2()
        console.timeEnd('全部')
      })
    </script>
  </body>
</html>
